<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>在线 JS 控制台</title>
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <!-- PWA（渐进式 Web 应用程序）- 配置 PC 和 手机 的桌面图标等信息 -->
  <link rel="manifest" href="manifest.json">
  <!-- 兼容 iPhone 手机桌面图标 -->
  <link rel="apple-touch-icon" href="android-chrome-512x512.png">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-title" content="JS 控制台">
  <meta name="apple-mobile-web-app-status-bar-style" content="default">
  <script src="https://cdn.bootcdn.net/ajax/libs/eruda/2.5.0/eruda.min.js"></script>
  <script>
    // eruda 初始化
    eruda.init({
      tool: ['console'],
    })
    // 默认显示面板
    eruda.show()
  </script>
  <script>
    // 获取 shadowRoot 对象
    const shadowRoot = document.querySelector('div').shadowRoot

    // 获取执行按钮并修改样式
    const execute = shadowRoot.querySelector('.eruda-execute')
    execute.textContent = '运行'
    execute.style.backgroundColor = '#07c160'
    execute.style.color = '#fff'

    // 获取取消按钮并修改文字
    const cancel = shadowRoot.querySelector('.eruda-cancel')
    cancel.textContent = '取消'

    // 获取文本框并设置占位符
    const textarea = shadowRoot.querySelector('textarea')
    textarea.placeholder = '请输入JS代码...'
  </script>
</head>

<body>
  <h1>在线 JS 控制台</h1>
  <img src="https://badges.toozhao.com/badges/01H2Z6H5MJ7KDAKBN2WQHTCCGP/green.svg" />
</body>

</html>